<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
<template>
  <div class="title-bar pywebview-drag-region">
    <div class="title-bar-left">
      <div class="app-icon">
        <img src="@/assets/logo.ico" alt="图标">
      </div>
      <div class="app-title">PVAX桌面应用</div>
    </div>
    <div class="title-bar-right">
      <button class="window-control minimize" @click="minimizeWindow">
        <n-icon size="20">
          <RemoveOutline />
        </n-icon>
      </button>
      <button class="window-control maximize" @click="maximizeWindow">
        <n-icon size="20">
          <SquareOutline />
        </n-icon>
      </button>
      <button class="window-control close" @click="closeWindow">
        <n-icon size="22">
          <CloseCircleOutline />
        </n-icon>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RemoveOutline, SquareOutline, CloseCircleOutline } from '@vicons/ionicons5'
import { CheckboxOutline, GameController, GameControllerOutline } from '@vicons/ionicons5'
import { ref } from "vue"
const maxstate = ref(false)
// 窗口控制函数
const minimizeWindow = () => {
  // 在实际桌面应用中，这里会调用相应的API
  console.log('最小化窗口')
  window.pywebview.api.minimize()
}

const maximizeWindow = () => {
  // 在实际桌面应用中，这里会调用相应的API
  if (maxstate.value) {
    // 还原窗口
    window.pywebview.api.restore()
    maxstate.value = false
  } else {
    window.pywebview.api.maximize()
    maxstate.value = true
  }
}

const closeWindow = () => {
  // 在实际桌面应用中，这里会调用相应的API
  console.log('关闭窗口')
  window.pywebview.api.close()
}
</script>

<style scoped>
.title-bar {
  height: var(--title-bar-height);
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  width: 100%;
  -webkit-app-region: drag;
  /* 使标题栏可拖拽 */
}

.title-bar-left {
  display: flex;
  align-items: center;
  color: white;
  font-size: 14px;
}

.app-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;

  img {
    width: 100%;
    height: 100%;
  }
}

.title-bar-right {
  display: flex;
  -webkit-app-region: no-drag;
  /* 使控制按钮不可拖拽 */
}

.window-control {
  width: 30px;
  height: 30px;
  border: none;
  margin-left: 8px;
  cursor: pointer;
  outline: none;
  background-color: transparent;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.window-control:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.window-control.close:hover {
  background-color: #ff605c;
}
</style>